<template>
    <div class="home_container">
        <div class="lunbotu">
            <img src="../../images/01.png" alt="">
        </div>

        <div class="main">
            <h1>
                <span class="left">阅读</span>
                <span class="right"><router-link to="/read">查看更多</router-link></span>
            </h1>
            <div class="info">
                <div class="infoBox" v-for="item in readListData" :key="item.id">
                    <router-link tag="div" class="top" :to="{ name:'readIfo' , params:{ id : item.id }}">
                        <img :src="$store.state.httpUrl + item.imgUrl" alt="">
                    </router-link>
                    <p><router-link  :to="{ name:'readIfo' , params:{ id : item.id }}">{{item.title}}</router-link></p>
                </div>
            </div>
            
            <h1>
                <span class="left">电台</span>
                <span class="right"><router-link to="/radio">查看更多</router-link></span>
            </h1>
            <div class="info">
                <div class="infoBox" v-for="item in radioListData" :key="item.id">
                    <div class="top">
                        <img :src="$store.state.httpUrl + item.imageUrl" alt="">
                        <div class="vidoIcon">
                            <router-link :to="{ name:'radio', params: { userId: 222}}"><img src="../../images/radioMu.png" alt=""></router-link>
                        </div>
                    </div>
                    <p><router-link to="/radio">{{item.title}}</router-link></p>
                    <span><router-link to="/radio">{{item.ridioDesc}}</router-link></span>
                </div>
            </div>
            
            <h1>
                <span class="left">资讯</span>
                <span class="right"><router-link to="/zixun">查看更多</router-link></span>
            </h1>
            <div class="zixunInfo">
                <div class="left">
                    <div class="listInfo" v-for="item in articleListData" :key="item.id">
                        <div class="img">
                            <img :src="$store.state.httpUrl + item.imgUrl" alt="">
                        </div>
                        <div class="imgIfo">
                            <p>{{item.title}}</p>
                            <router-link :to="{ name:'zixunIfo', params: { id : item.id}}" v-html="item.content"></router-link>
                            <router-link :to="{ name:'zixunIfo' , params:{ id : item.id }}" tag="span">阅读全文</router-link>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="listInfo" v-for="item in articleListData" :key="item.id">
                        <p>{{item.title}}</p>
                        <router-link :to="{ name:'zixunIfo' , params:{ id : item.id }}" v-html="item.content"></router-link>
                        <span>{{item.browseNumber}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            radioListData:[],
            readListData:[],
            articleListData:[],
        }
    },
    created(){
        this.readList();
        this.articleList();
        this.radioList();
    },
    methods:{
         readList(){
            this.$http.get(this.$store.state.httpUrl + '/index/article/article').then((response) => {
                // success callback
                console.log(response)
                if(response.status == 200){
                    this.readListData = response.body.data;
                }
            }, (response) => {
                // error callback
            });
        },
        articleList(){
            this.$http.get(this.$store.state.httpUrl + '/index/article/content').then((response) => {
                // success callback
                console.log(response)
                if(response.status == 200){
                    this.articleListData = response.body.data;
                }

            }, (response) => {
                // error callback
            });
        },
        radioList(){
            this.$http.get(this.$store.state.httpUrl + '/index/ridio/fore').then((response) => {
                // success callback
                console.log(response)
                if(response.status == 200){
                    this.radioListData = response.body.data;
                }
            }, (response) => {
                // error callback
            });
        },
    }
}
</script>

<style lang="less" scoped>
    .home_container {

        .lunbotu img {
            width:100%;
            max-height: 350px;
        }

        .main {
            width:1000px;
            margin:0 auto;

            h1 {
                padding: 20px 0 8px;
                font-size: 13px;
                height: 54px;
                line-height: 26px;
                margin-top: 5px;

                span.left {
                    float:left;
                    border-left:2px solid rgba(239,177,11,1);
                    padding-left:5px;
                }

                span.right {
                    float:right;
                    display: block;
                    height:26px;
                    line-height: 26px;
                    padding:0 15px;
                    border-radius:13px;
                    border:1px solid rgba(239,177,11,1);
                    cursor: pointer;
                }
            }
            .info {
                display:flex;
                justify-content: space-between;
                margin-bottom: 20px;

                .infoBox {
                    width:300px;
                    margin: 10px 0;
                    box-shadow: 0 0 3px #ddd;
                    border:1px solid #ddd;
                    border-radius: 12px;
                    overflow: hidden;
                    float:left;

                    .top {
                        position: relative;
                        width: 100%;
                        overflow: hidden;
                        border-radius: 12px;

                        img {
                            width:100%;
                            cursor:pointer;
                        }

                        .vidoIcon {
                            position: absolute;
                            left:0;
                            top:0;
                            width: 100%;
                            background-color: rgba(0,0,0,.5);
                            height: 0;
                            display: none;
                            overflow: hidden;


                            img {
                                position: absolute;
                                left:50%;
                                top:50%;
                                width:70px;
                                height:70px;
                                margin-left: -35px;
                                margin-top: -35px;
                                cursor:pointer;
                            }
                        }
                    }

                    .top:hover .vidoIcon {
                        height: 100%;
                        display: block;
                    }

                    p {
                        line-height: 22px;
                        padding: 10px 12px 13px;
                    }
                    span {
                        font-size: 11px;
                        padding: 0 15px 13px;
                        display: block;

                        a:hover, a:visited, a:link, a:active {
                            text-decoration: none;
                            color:#a5a5a5;
                        }
                    }
                }
            }

            .zixunInfo {
                overflow: hidden;
                display: flex;
                justify-content: space-between;

                .left {

                    .listInfo {
                        margin-top:10px;
                        overflow: hidden;
                        box-shadow: 0 0 3px #ddd;
                        border: 1px solid #ddd;
                        border-radius: 12px;
                        height:161px;

                        div {
                            float:left;
                        }
                        img {
                            height:161px;
                        }
                        .imgIfo {
                            width:345px;
                            height:100%;
                            position: relative;

                            p {
                                line-height: 22px;
                                padding: 15px 15px 8px;
                                font-size: 16px;
                            }

                            span {
                                position: absolute;
                                right: 15px;
                                bottom: 6px;
                                padding: 0 13px;
                                display: block;
                                height: 28px;
                                font-size: 12px;
                                line-height: 28px;
                                border-radius: 15px;
                                background-color: #efb10b;
                                color: #fff;
                                cursor: pointer;
                            }

                        }
                        .imgIfo > a {
                            text-decoration: none;
                            color:#a5a5a5;
                            font-size: 12px;
                            padding: 0 15px 13px;
                            display: block;
                        }
                    }
                    .listInfo + .listInfo {
                        margin-top:30px;
                    } 
                }
                .right {    
                    width: 318px;
                    font-size: 16px;

                    .listInfo {
                        position: relative;
                        padding:5px 0 8px;
                        border-bottom:1px solid #ddd;

                        p {
                            line-height: 22px;
                            padding: 15px 0 8px;
                        }
            
                        span {
                            position: absolute;
                            right: 15px;
                            bottom: 6px;
                            color:#a5a5a5;
                            font-size: 11px;
                        }

                        span:before {
                            content:"";
                            display: inline-block;
                            height: 15px;
                            width: 18px;
                            vertical-align: middle;
                            background:url(../../images/svg/eyes.png)
                        }
            
                        a {
                            text-decoration: none;
                            color:#a5a5a5;
                            font-size: 11px;
                            padding: 0 0 28px;
                            display: block;
                        }

                    }
                }
            }
        }
    }
</style>
